<template>
  <div class="list_wrapper">
    <div class="header">
      <span>云农场智慧服务系统</span>
      <el-button
        v-if="role !== '2'"
        type="primary"
        icon="el-icon-user"
        plain
        size="mini"
        @click="login"
      >
        登录
      </el-button>
    </div>
    <div class="body">
      <div class="search">
        <el-input
          v-model="keys"
          placeholder="搜索基地"
          prefix-icon="el-icon-search"
          @keyup.enter.native="search"
        />
        <div class="spiderfarm_wrapper">
          <span class="tip">总共有{{ total }}条结果</span>
          <div class="spiderfarm">
            <svg-icon icon-class="farm" />
            <div class="name" @click="goToFarmPage">网上农场</div>
          </div>
        </div>
      </div>
      <div class="list">
        <el-row v-for="(item,index) of bases" :key="item.siteId" class="item" @click.native="routeTo(item.siteId, item.entId)">
          <el-col :span="18">
            <div>{{ index+1 }}：{{ item.siteName }}</div>
            <div class="address">{{ item.province }}-{{ item.city }}-{{ item.county }}</div>
          </el-col>
          <el-col :span="6">
            <el-image
              class="image"
              :src="item.image"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'

export default {
  name: 'List',
  props: {
    bases: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      keys: '',
      role: store.getters.role
    }
  },
  computed: {
    total() {
      return this.bases.length
    }
  },
  methods: {
    login() {
      this.$emit('login')
    },
    search() {
      console.log(111)
      this.$emit('search', this.keys)
    },
    routeTo(siteId, entId) {
      this.$emit('route-to', siteId, entId)
    },
    goToFarmPage() {
      this.$router.push({
        path: '/farm'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list_wrapper {
  width:350px;
  position:absolute;
  top:10%;
  bottom:10%;
  z-index:2;
  margin-left:8%;
  background-color:#fff;
  border-radius:8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  overflow: hidden;
  .header {
    display:flex;
    justify-content: space-between;
    background-color:#409EFF;
    font-size:15px;
    color:#fff;
    padding:10px;
    line-height:28px;
  }
  .body {
    .search {
      padding:10px;
      .spiderfarm_wrapper {
        display:flex;
        justify-content: space-between;
        font-size:12px;
        color:rgb(192,196,204);
        margin-top:10px;
        .spiderfarm {
          display:flex;
        }
        .spiderfarm:hover {
          cursor:pointer;
          color:#409EFF;
        }
        .name {
          margin-left:5px;
        }
      }
    }
    .list {
      width:100%;
      overflow-y: scroll;
      padding: 0 10px 10px;
      position:absolute;
      bottom:10px;
      top:132px;
      .item {
        padding:10px 0;
        cursor: pointer;
        .image {
          width: 100%;
          height: 100%;
          border-radius:5px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        }
        .address {
          margin-top:10px;
          font-size:15px;
        }
      }
      .item:not(:last-child) {
        border-bottom:1px solid rgb(235,235,235);
      }
    }
  }
}

</style>
